<template>
    <div class="nav">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/control' }">用户订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 搜索 -->
    <div class="search">
        <h3>筛选条件</h3>
        <div class="search-details">
            <el-button type="danger" size="small" @click="delproduct(ids)">全部清除</el-button>
            <label>
                <span>搜索</span>
                <el-input placeholder="请输入订单号" clearable size="small" v-model="search.name" @change="searchData" />
            </label>
        </div>
    </div>
    <!-- 内容 -->
    <div class="container">
        <el-config-provider :locale="zhCn">
            <!-- 当选择项发生改变时触发，有一个参数会返回所有勾选的数据 -->
            <el-table :data="pagesData" style="width: 100%" max-height="500px" @selection-change="changeId">
                <el-table-column type="selection" width="55" v-model="ids" />
                <el-table-column fixed prop="number" label="订单号" width="100" />
                <el-table-column prop="status" label="订单状态" width="100" />
                <el-table-column prop="user_id" label="订单用户" width="100" />
                <el-table-column prop="address_book" label="地址" width="200" />
                <el-table-column prop="order_time" label="下单时间" width="100" />
                <el-table-column prop="checkout_time" label="结账时间" width="100" />
                <el-table-column prop="pay_method" label="支付方式" width="100" />
                <el-table-column prop="amount" label="实收金额" width="100" />
                <el-table-column prop="remark" label="用户备注" width="300" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="add(scope.row)">修改</el-button>
                        <el-button type="danger" size="small" @click="delproduct([scope.row.id])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-config-provider>
    </div>
    <!-- 分页 -->
    <div class="page">
        <el-config-provider :locale="zhCn">
            <el-pagination v-model:current-page="pages.current" :page-sizes="[4, 6, 8]"
                layout="total,sizes,prev, pager, next" :total="pages.pagetotal" v-model:page-size='pages.pagesize' />
        </el-config-provider>
    </div>
    <!-- 弹出的页面 -->
    <el-dialog v-model="visible" width="800px" @close="close()">
        <template #header>
            <div class="my-header">
                <h4>修改订单信息</h4>
                <el-form :rules="rules" :model="info" ref="formrules" label-width="100px" :inline="true">
                    <el-form-item label="订单号" prop="number">
                        <el-input placeholder="请输入订单号" clearable v-model="info.number" size="small" class="inp">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="订单状态" prop="status">
                        <el-select placeholder="请选择分类" size="small" clearable v-model="info.status" class="inp">
                            <el-option v-for="item in catelist" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单用户" prop="user_id">
                        <el-input placeholder="请输入" clearable v-model="info.user_id" size="small" class="inp">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address_book">
                        <el-input v-model="info.address_book" placeholder="请输入地址" clearable size="small" class="inp">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="下单时间" prop="order_time">
                        <el-time-picker v-model="info.order_time" placeholder="下单时间" value-format="HH:mm:ss" size="small" />
                    </el-form-item>
                    <el-form-item label="结账时间" prop="checkout_time">
                        <el-time-picker v-model="info.checkout_time" placeholder="结账时间" value-format="HH:mm:ss"
                            size="small" />
                    </el-form-item>
                    <el-form-item label="支付方式" prop="pay_method">
                        <el-radio-group v-model="info.pay_method">
                            <el-radio label="1">微信 </el-radio>
                            <el-radio label="2">支付宝</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="实收金额" prop="amount">
                        <el-input v-model="info.amount" placeholder="请输入" clearable size="small" class="inp">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户备注" prop="remark">
                        <el-input v-model="info.remark" placeholder="请输入" clearable size="small" type="textarea"
                            class="inp">
                        </el-input>
                    </el-form-item>
                    <div style="text-align: center;"> <el-button type="success"
                            @click="changeProduct(formrules)">提交</el-button></div>

                </el-form>
            </div>
        </template>
    </el-dialog>
</template> 
<script setup>

import { ref, computed } from 'vue'
import http from '../tools/axios'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 分类数据
const catelist = ref([
    { id: 1, title: '待付款' },
    { id: 2, title: '待派送' },
    { id: 3, title: '已派送' },
    { id: 4, title: '已完成' },
    { id: 5, title: '已取消' },
    { id: 6, title: '待自提' },

])
// 产品详情数据
const product = ref([
    { id: 1, number: '33061', status: '待付款', user_id: 'tb123', address_book: '东华理工大学', order_time: '19:50:36', checkout_time: '20:00:00', pay_method: '微信', amount: 10.89, remark: '不要加辣椒谢谢' },
    { id: 2, number: '3306', status: '待付款', user_id: 'tb123', address_book: '东华理工大学', order_time: '19:50:36', checkout_time: '20:00:00', pay_method: '微信', amount: 10.89, remark: '不要加辣椒谢谢' },
    { id: 3, number: '3306', status: '待付款', user_id: 'tb123', address_book: '东华理工大学', order_time: '19:50:36', checkout_time: '20:00:00', pay_method: '微信', amount: 10.89, remark: '不要加辣椒谢谢' },
    { id: 4, number: '3306', status: '待付款', user_id: 'tb123', address_book: '东华理工大学', order_time: '19:50:36', checkout_time: '20:00:00', pay_method: '微信', amount: 10.89, remark: '不要加辣椒谢谢' },
    { id: 5, number: '3306', status: '待付款', user_id: 'tb123', address_book: '东华理工大学', order_time: '19:50:36', checkout_time: '20:00:00', pay_method: '微信', amount: 10.89, remark: '不要加辣椒谢谢' },

])
// 查询订单信息
const getDate = () => {
    http.get('/product/inquire_order').then((res) => {
        console.log(res.data.data);
        product.value = res.data.data
    })

    console.log(product.value);
}
getDate()
// 搜索数据
const search = ref({
    name: '',
    category: ''
})

const ids = ref([])
const changeId = (value) => {
    ids.value = value.map(item => {
        return item.id
    })
}

const searchData = computed(() => {
    let arr = product.value.filter(item => {
        return item.number.includes(search.value.name)
    })

    return JSON.parse(JSON.stringify(arr)).map(item => {
        for (var i = 0; i < catelist.value.length; i++) {
            if (catelist.value[i].id === item.status) {
                item.status = catelist.value[i].title
            }
        }
        console.log(item.pay_method);
        if (item.pay_method == 1) {
            item.pay_method = '微信'
        } else if (item.pay_method == 2) {
            item.pay_method = '支付宝'
        }
        return item
    })

})
// 页码数据
const pages = ref(
    { current: 1, pagesize: 4, pagetotal: searchData.value.length }
)

// 分页功能
const pagesData = computed(() => {
    pages.value.pagetotal = searchData.value.length;
    const start = (pages.value.current - 1) * pages.value.pagesize;
    const end = pages.value.current * pages.value.pagesize;
    console.log(start, end);
    return searchData.value.slice(start, end)
})


// 删除事件
const delproduct = (id) => {
    if (confirm('你确定要删除吗？')) {
        http.post('/product/delete_order', { ids: id }).then((res) => {
            console.log(res.data);
        })
    }
    getDate()
}

// 弹窗功能
const visible = ref(false)
const info = ref({})

const rules = ref({
    number: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    status: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    user_id: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    address_book: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    order_time: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    checkout_time: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    pay_method: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    amount: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],

})



// 表单提交
const formrules = ref(null)

// 新增事件
const add = (obj) => {
    visible.value = true;
    // 防止数据粘连
    if (obj) info.value = { ...obj }
}
// 关闭弹窗 清除表单数据
const close = () => {
    info.value = {}
}
const changeProduct = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            catelist.value.map(item => {
                if (item.title == info.value.status) {
                    info.value.status = item.id
                }
                if (item.pay_method == '微信') {
                    item.pay_method = 1
                } else if (item.pay_method == '支付宝') {
                    item.pay_method = 2
                }
                return item
            })
            http.post('/product/update_order', info.value).then(res => {
                ElMessage({
                    showClose: true,
                    message: '修改成功',
                    type: 'success',
                })
            })
            getDate()
            visible.value = false
        } else {
            ElMessage({
                showClose: true,
                message: '请补全信息重新添加',
                type: 'warning',
            })
        }
    })
}
</script>

<style scoped>
.search {
    margin-top: 20px;
}

.search-details {
    display: flex;
}

.search-details label {
    margin-left: 30px;
    color: #999;
}

.container {
    margin: 30px;
    margin-top: 50px;
}

label .el-input,
label .el-select {
    margin-left: 10px;
    width: 200px;
}

label .el-select {
    margin-right: 30px;
}

.page {
    display: flex;
    justify-content: center;
}

.inp {
    width: 200px;
}
</style>